<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3数据响应式</title></title>
</head>
<body>
<script>
      // user 对象  ===> target
      const user = ({
      name: '老汉',
      age: 25, 
      like: {
        name: '龟孙',
        age: 23, 
        hobby: ['code', 'play game']
      }
    })
    // proxyUser 代理对象
    const proxyUser = new Proxy(user, {
      // 获取 target 对象属性值
      get(target, prop){
        console.log('===> 获取 get')
        return Reflect.get(target, prop)
      },
      // 修改 target 对象属性值或新增 target 对象属性值
      set(target, prop, val) {
        console.log('===> 设置属性')
        Reflect.set(target, prop, val)
      },
       // 删除 target 对象属性值
      deleteProperty(target, prop) {
        console.log('===> 删除属性')
        Reflect.deleteProperty(target, prop)
      }
    })
    console.log(proxyUser.name)
    proxyUser.name = '娃娃'
    console.log(proxyUser.name)
    proxyUser.gender = '男'
    console.log(proxyUser)
    proxyUser.like.gender = '女'
    console.log(proxyUser)
    delete proxyUser.name
    console.log(proxyUser)

</script>
</body>
</html>
